<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../Vue.js"></script>
</head>

<body>
    <!-- v-model 双向绑定 和value值有关  -->
    <div class="box">

        {{value}}
        <!-- .lazy 就相当于 change 事件后同步更新  change事件是当失去焦点改变数据时更新-->
        <input type="text" v-model.lazy="value">

        <!-- 因为v-model 绑定出来的数据是字符串 所以有时候 要变成数字时就用 .number  -->
        <input type="text" v-model.number="value1">

        <!--   .trim     就是去掉两侧空格   -->
        <input type="text" v-model.trim="value2">
    </div>
    <script>
        const objs = {
            data() {
                return {
                    value: '',
                    value1: '',
                }

            }

        }
        let app = Vue.createApp(objs).mount('.box')
    </script>
</body>

</html>